<template>
  <div class="home">
    <van-nav-bar title="小u商城" nav-bar-text-color="@white" />
    <!-- 顶部搜索 -->
    <div class="top-search">
      <div class="w">
        <div class="top">
          <i class="iconfont icon-address_icon"></i>
          <img src="../../assets/images/pic/logo/white.png" alt="" />
          <form class="search">
            <i class="iconfont icon-magnifier"></i>
            <input
              type="search"
              placeholder="按内容搜索"
              v-model="keywords"
              @keydown.13.prevent="
                $router.push({
                  path: '/goodsSearch?keywords=' + keywords,
                  query: { path: '/index/home' },
                })
              "
            />
          </form>

          <i class="iconfont icon-shangdian"></i>
        </div>

        <div class="nav">
          <ul>
            <li>
              <a
                href="#"
                class="recommend"
                v-for="item in cates"
                :key="item.id"
              >
                {{ item.catename }}&nbsp;&nbsp;&nbsp;</a
              >
            </li>
            <li>
              <a href="#"><i class="iconfont icon-sanheng"></i>分类</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- <ul class="banners">
      <wc-swiper v-if="banners.length">
        <wc-slide class="swiper" v-for="item in banners" :key="item.id">
          <img v-lazy="$pregImg + item.img" alt=""/>
        </wc-slide>
      </wc-swiper>
     
    </ul> -->
    <div class="swiper">
      <div class="block" height="2.2rem">
        <el-carousel height="2.2rem" style="z-index: 5">
          <el-carousel-item v-for="(item, index) in swiperUrl" :key="index">
            <img :src="$pregImg + item.img" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 列表 -->
    <div class="banner2">
      <ul>
        <li>
          <a href="#">
            <img
              src="../../assets/images/icon/index/kingkong/seckill.png"
              alt=""
            />
            <span>限时秒杀</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../../assets/images/icon/index/kingkong/top.png" alt="" />
            <span>畅销商品</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img
              src="../../assets/images/icon/index/kingkong/brand.png"
              alt=""
            />
            <span>品质大牌</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img
              src="../../assets/images/icon/index/kingkong/selfsupport.png"
              alt=""
            />
            <span>小U自营</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img
              src="../../assets/images/icon/index/kingkong/integral.png"
              alt=""
            />
            <span>积分商城</span>
          </a>
        </li>
      </ul>
    </div>

    <!-- banner3 -->
    <div class="banner3">
      <div class="inner">
        <div class="kill-left">
          <div class="wz">
            <span>限时秒杀</span>
            <a href="#" class="wz-in">
              <span class="wz-inner">查看更多</span>
              <i class="iconfont icon-icon"></i>
            </a>
          </div>
          <div class="wz2">
            <span>每天0点场，好货秒不停</span>
          </div>
          <div class="two">
            <span>{{ shijian.tian }}</span>
            <i>天</i>
            <span>{{ shijian.shi }}</span>
            <i>时</i>
            <br />
            <span>{{ shijian.fen }}</span>
            <i>分</i>
            <span>{{ shijian.miao }}</span>
            <i>秒</i>
          </div>
        </div>
        <div class="brand-new">
          <div class="first">
            <p>品牌上新</p>
            <p class="p2">9点整，抢大牌</p>
            <div>
              <span>疯抢红包</span>
              <i class="iconfont icon-icon"></i>
            </div>
          </div>
          <div class="second">
            <p>日用好物</p>
            <p class="p2">愿君采撷</p>
            <div>
              <span>塞满奖券</span>
              <i class="iconfont icon-icon"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- banner4 -->
    <div class="banner4">
      <div class="inner">
        <div class="pre-buy">
          <div class="top">双11尖货预购</div>
          <div class="goods1">
            <img src="../../assets/images/pic/commodity/01.png" alt="" />
            <img src="../../assets/images/pic/commodity/02.png" alt="" />
          </div>
        </div>
        <div class="globle">
          <div class="top">畅购全球</div>
          <div class="goods1">
            <img src="../../assets/images/pic/commodity/01.png" alt="" />
            <img src="../../assets/images/pic/commodity/02.png" alt="" />
          </div>
        </div>
      </div>
    </div>

    <!-- 热门推荐 -->
    <div class="banner5">
      <div class="innerLink">
        <a
          v-for="(item, index) in tab"
          :key="item"
          :class="{ active: selectNum === index }"
          @click="selectNum = index"
          >{{ item }}</a
        >
      </div>
      <ul>
        <li
          v-for="item in recommend[selectNum].content"
          :key="item.id"
          @click="toDetail(item.id)"
        >
          <div class="pic">
            <img :src="$pregImg + item.img" alt="" />
          </div>
          <div class="sellContent">
            <p>{{ item.goodsname }}</p>
            <p class="red">现价格：&yen;{{ item.price }}</p>
            <p class="underline">原价格：&yen;{{ item.market_price }}</p>
            <a href="#">立即抢购</a>
          </div>
        </li>
      </ul>
    </div>
    <br /><br /><br /><br /><br /><br />
  </div>
</template>

<script>
import { getIndexGoods, getBanner } from "../../request/api";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      keywords: "",
      selectNum: 0,
      active: 0,
      tab: ["热门推荐", "上新推荐", "所有商品"],
      // cates: [], //所有分类
      recommend: [{ content: [] }, { content: [] }, { content: [] }],
      shijian: {
        tian: "",
        shi: "",
        fen: "",
        miao: "",
      },
      swiperUrl: localStorage.getItem("swiperUrl")
        ? JSON.parse(localStorage.getItem("swiperUrl"))
        : [],
      timer: 0,
    };
  },
  computed: {
    ...mapGetters({
      banners: "banners/banners",
      cates: "getCate/getCate",
      countdown: "countdown",
    }),
  },
  methods: {
    toDetail(id) {
      this.$router.push("/details/" + id);
    },
    auto() {
      this.num++;
    },
    ...mapActions({
      bannersListActions: "banners/bannersListActions",
      getCateListActions: "getCate/getCateListActions",
      settime: "countdownAction",
    }),
    getime(time) {
      let timeObj = {};
      timeObj.tian = Math.floor(time / (1000 * 60 * 60 * 24));
      timeObj.shi = Math.floor((time / (1000 * 60 * 60)) % 24);
      timeObj.fen = Math.floor((time / (1000 * 60)) % 60);
      timeObj.miao = Math.floor((time / 1000) % 60);
      return timeObj;
    },
  },
  watch: {
    timer(v) {
      this.shijian = {
        tian: this.getime(v).tian,
        shi: this.getime(v).shi,
        fen: this.getime(v).fen,
        miao: this.getime(v).miao,
      };
    },
  },
  mounted() {
    getBanner().then((res) => {
      if (res.code === 200) {
        this.swiperUrl = res.list;
        localStorage.setItem("swiperUrl", JSON.stringify(this.swiperUrl));
      }
    });

    this.settime();
    setTimeout(() => {
      this.timer = this.countdown;
    }, 200);
    setInterval(() => {
      this.timer -= 1000;
    }, 1000);

    // 获取所有的商品分类
    // 使用封装的getCates
    this.getCateListActions();
    this.bannersListActions();
    // getCate().then((res) => {
    //   if (res.code === 200) {
    //     this.cates = res.list;
    //   }
    // });

    getIndexGoods().then((res) => {
      if (res.code === 200) {
        this.recommend = res.list;
      }
    });

    document.title = this.$route.meta.title;
  },
};
</script>

<style scoped>
.banners img {
  width: 95% !important;
  height: 1.78rem;
}
/* * 顶部返回字体样式  */
/deep/.van-nav-bar {
  background: #ff6040;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  font-weight: bold;
  color: #fff;
}
/deep/ .van-nav-bar__text {
  font-size: 0.12rem;
  color: #fff;
}
/deep/ .van-nav-bar .van-icon {
  font-size: 0.12rem;
  color: #fff;
}

/deep/ [class*="van-hairline"]::after {
  border: none;
}
/deep/ .van-nav-bar__content {
  height: 48px;
}
.two {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 900;
  color: #e6eed6;
}
.two span {
  display: inline-block;
  background-color: #617c37;
  padding: 0 3px;
}
.two i {
  font-style: normal;
  color: #617c37;
  margin: 0 3px;
}
.swiper {
  width: 100%;
  margin: 0.1rem auto;
  text-align: center;
  overflow: hidden;
}
.swiper img {
  width: 95%;
  height: 2.2rem;
}
</style>